<template>
  <div class="app-container">
    <el-card>
      <el-form ref="form" :model="infoForm" class="demo-form-inline">
        <el-row :gutter="60">
          <el-col :span="8">
            <el-form-item label="司机账号:" prop="account">
              <el-input
                v-model.trim="infoForm.account"
                clearable
                placeholder="请输入司机账号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="司机姓名:" prop="name">
              <el-input
                v-model.trim="infoForm.name"
                clearable
                placeholder="请输入司机姓名"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="司机手机号:" prop="phone">
              <el-input
                v-model.trim="infoForm.phone"
                clearable
                placeholder="请输入司机手机"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row_2" :gutter="60">
          <el-col :span="8">
            <el-form-item label="所属机构:" prop="agentId">
              <tree-select :id.sync="infoForm.agentId" v-model="form.value" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="onSearch">搜索</el-button>
            <el-button @click="fnReset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never" class="body">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        style="width: 100%; min-width: 1209px"
      >
        <el-table-column label="序号" width="100">
          <template #default="slot">
            {{ (infoForm.page - 1) * infoForm.pageSize + slot.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="account" label="司机账号" width="200" />
        <el-table-column prop="name" label="司机姓名" width="200" />
        <el-table-column prop="mobile" label="司机电话" width="200" />
        <el-table-column
          prop="truck.licensePlate"
          label="关联车辆"
          width="200"
        />
        <el-table-column prop="agency.name" label="所属机构" width="200" />
        <el-table-column prop="truck.runStatus" label="工作状态" width="200">
          <template #default="{ row }">
            <span v-if="row.workStatus" class="work workStatus">上班</span>
            <span v-else class="rest workStatus">休息</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="130">
          <template #default="{ row }">
            <router-link
              :to="{
                path: '/user/driver-detail',
                query: {
                  id: row.userId,
                  formUrlName: '司机管理',
                },
              }"
            >查看</router-link>
            <div class="line" />
            <a href="JavaScript:;" @click="fnDeploy(row)">配置车辆</a>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="infoForm.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="infoForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 提示弹窗 -->
    <el-dialog
      class="hint"
      title="车辆配置"
      width="30%"
      :visible.sync="showHintDialog"
    >
      <h2>配置车辆需满足以下条件:</h2>
      <div class="term">
        <span><i>1</i>司机信息已完善</span>
        <span><i>2</i>司机已设置排班</span>
        <span><i>3</i>司机绑定车辆未在启用状态</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showHintDialog = false">取 消</el-button>
        <el-button type="primary" @click="fnHintOK">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 主要弹框 -->
    <el-dialog
      width="45%"
      class="primary"
      title="配置车辆"
      :visible="showDialog"
      @close="fnClose"
    >
      <div class="info">
        <span>司机编号:
          <span
            style="margin-left: 1em; color: #8c919d"
          >{{ deployForm.account }}
          </span>
        </span>
        <span>司机名称:
          <span
            style="margin-left: 1em; color: #8c919d"
          >{{ deployForm.name }}
          </span>
        </span>
        <span>司机电话:
          <span
            style="margin-left: 1em; color: #8c919d"
          >{{ deployForm.mobile }}
          </span>
        </span>
        <span>所属机构:
          <span style="margin-left: 1em; color: #8c919d">{{
            deployForm.agency?.name
          }}</span>
        </span>
      </div>
      <div class="select">
        <label>配置车辆:</label>
        <el-select v-model="deployForm.truck.licensePlate" @change="handleChange">
          <el-option
            v-for="item in deployList"
            :key="item.id"
            :label="item.licensePlate"
            :value="{value:item.licensePlate,info:item}"
          />
        </el-select>
      </div>
      <el-table :data="deployData" style="width: 584px">
        <el-table-column prop="licensePlate" label="车牌号" width="211" />
        <el-table-column prop="status" label="车辆状态" width="211">
          <template #default="{ row }">
            <span v-if="row.workStatus" class="usable carStatus">可用</span>
            <span v-else class="disable carStatus">停用</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="160">
          <template #default="{ row }">
            <router-link
              :to="{
                path:'/car/carDetail',
                query:{
                  id:row.id
                }
              }"
            >查看</router-link>
            <div class="line" />
            <el-button
              size="mini"
              type="text"
              style="color: #f56c6c"
              @click="fnDel(row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="arrangeCar">确 认</el-button>
        <el-button @click="fnClose">取 消</el-button>
      </span>
    </el-dialog>
    <Footer />
  </div>
</template>

<script>
import { arrangeCarAPI, getCarStoppedAPI, getMotoristsAPI } from '@/api/employee'
import { getCarDetail } from '@/api/car'
export default {
  name: 'CourierManage',
  data() {
    return {
      form: {
        value: ''
      },
      tableData: [],
      infoForm: {
        page: 1,
        pageSize: 10,
        account: '',
        name: '',
        phone: '',
        agentId: ''
      },
      deployForm: {
        truck: { licensePlate: '' }
      },
      counts: 0,
      deployData: [], // 配置车辆数据
      deployList: [], // 配置车辆 车牌号
      loading: false,
      showHintDialog: false, // 提示弹窗
      showDialog: false // 具体信息弹框
    }
  },
  created() {
    this.getMotorists()
  },
  methods: {
    fnClose() {
      this.showDialog = false
      this.deployData = []
    },
    async arrangeCar() { // 配置车辆点击确定
      await arrangeCarAPI({
        driverIds: [this.deployForm.userId],
        truckId: this.deployData[0]?.id || ''
      })
      this.$message.success('配置成功')
      this.fnClose()
    },
    async getMotorists() { // 获取司机信息
      this.loading = true
      const res = await getMotoristsAPI(this.infoForm)
      this.counts = res.counts * 1
      this.tableData = res.items
      this.loading = false
    },
    handleSizeChange(val) {
      this.infoForm.pageSize = val
      this.getMotorists()
    },
    handleCurrentChange(val) {
      this.infoForm.page = val
      this.getMotorists()
    },
    onSearch() {
      this.infoForm.page = 1
      this.getMotorists()
    },
    // 重置
    fnReset() {
      this.$refs.form.resetFields()
      this.form.value = ''
      this.getMotorists()
    },
    // 配置车辆
    fnDeploy(row) {
      this.deployForm = { ...row }
      this.deployForm.truck = { ...row.truck }
      this.showHintDialog = true
    },
    fnHintOK() {
      this.showHintDialog = false
      this.showDialog = true
      this.dataDeployment()
      this.getCarStopped()
    },
    async dataDeployment() {
      const res = await getCarDetail(this.deployForm.truck.id)
      this.deployData = [res]
    },
    fnDel(row) {
      this.deployData = []
      this.deployForm.truck.licensePlate = ''
    },
    // 获取已停用汽车列表
    async getCarStopped() {
      const res = await getCarStoppedAPI()
      this.deployList = res
    },
    // 当select发生改变时
    handleChange(val) {
      this.deployData = [val.info]
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  :deep(.el-card__body) {
    padding: 0;
    .el-form {
      background-color: #fff;
      min-width: 1286px;
      padding: 20px 30px;
      .el-form-item {
        display: flex;
        width: 100%;
        justify-content: flex-end;
        .el-form-item__label {
          font-weight: normal;
        }
        .el-form-item__label {
          min-width: 95px;
        }
        .el-form-item__content {
          flex: 1;
          .el-input {
            width: 267px;
          }
        }
      }
    }
    .el-button {
      width: 90px;
      margin-right: 16px;
    }
    .row_2 {
      .el-form-item {
        margin-bottom: 0;
      }
    }
  }
  .body {
    margin-top: 20px;
    // padding: 20px;
    :deep(.el-card__body) {
      padding: 30px !important;
    }

    :deep(.el-table) {
      border: 1px solid #ebeef5;
      a {
        color: #419eff;
        font-size: 13px;
      }
      .line {
        display: inline-block;
        width: 1px;
        height: 1em;
        margin: 0 8px;
        vertical-align: middle;
        background-color: #dcdfe6;
      }
      .el-table__header th {
        background-color: #f8faff;
        &:nth-child(1) {
          .cell {
            padding-left: 20px;
          }
        }
      }
      .el-table__row td {
        &:nth-child(1) {
          .cell {
            padding-left: 20px;
          }
        }
      }
      .el-table__body-wrapper {
        &::-webkit-scrollbar {
          background-color: transparent;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          border: 4px solid #fff;
          background-color: #dddee0;
        }
      }
      .workStatus {
        font-size: 13px;
        &::before {
          content: "";
          display: inline-block;
          margin-right: 6px;
          width: 6px;
          height: 6px;
          border-radius: 50%;
        }
      }
      .work::before {
        background-color: #1dc779;
      }
      .rest::before {
        background-color: #e15536;
      }
    }
  }
  .el-pagination {
    margin: 22px auto;
    text-align: center;
    span {
      font-size: 14px !important;
      color: #20232a !important;
    }
  }

  // 提示弹框
  .hint {
    :deep(.el-dialog__body) {
      padding: 10px 15px 10px 24px;
      h2 {
        font-size: 14px;
        font-weight: 500;
        color: #332929;
      }
      .term {
        display: flex;
        flex-wrap: wrap;
        span {
          width: 50%;
          margin-bottom: 0.6em;
          i {
            font-style: normal;
            border: 1px solid #edf0f6;
            display: inline-block;
            width: 1.25em;
            height: 1.25em;
            text-align: center;
            background-color: #fafcff;
            line-height: 1.25;
            border-radius: 50%;
          }
        }
      }
    }
  }
  // 主要信息弹框
  .primary {
    :deep(.el-dialog) {
      overflow: hidden;
      border-radius: 8px;
      .el-dialog__header {
        background-color: #f3f4f7;
      }
      .el-dialog__footer {
        text-align: center;
      }
      .el-dialog__body {
        padding: 20px 30px;
        .info {
          padding: 21px 52px;
          display: flex;
          flex-wrap: wrap;
          span {
            width: 50%;
            &:nth-child(1),
            &:nth-child(2) {
              margin-bottom: 1em;
            }
            color: #000;
          }
        }
        .select {
          margin: 20px 8px;
          label {
            margin-right: 1em;
          }
          .el-select {
            width: 240px;
          }
        }
        .line {
          display: inline-block;
          width: 1px;
          height: 1em;
          margin: 0 8px;
          vertical-align: middle;
          background-color: #dcdfe6;
        }
        .el-table {
          border: 1px solid #ebeef5;
          .carStatus {
            font-size: 13px;
            &::before {
              content: "";
              display: inline-block;
              margin-right: 6px;
              width: 6px;
              height: 6px;
              border-radius: 50%;
            }
          }
          .usable::before {
            background-color: #1dc779;
          }
          .disable::before {
            background-color: #e15536;
          }
          a{
            color: #419eff;
          }
        }
        .has-gutter {
          th {
            background-color: #f8faff;
            &:nth-child(1) {
              padding-left: 20px;
            }
          }
        }
        .el-table__row {
          td {
            font-size: 12px;
            color: #000;
            &:nth-child(1) {
              padding-left: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
